<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            height: 700px;
            background: #ccc;
        }
        #loginInfo{
            color: #f00;
            font-size: 12px;
        }

    </style>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            $('#btnLogin').click(function(){
                
                console.log($('#loginForm').serialize())
                
                $.ajax({
                    url:'http://127.0.0.1:8080/ajax/login',
                    /*data:{
                        username:$('#username').val(),
                        password:$('#password').val()
                    },*/
                    data:$('#loginForm').serialize(), // 序列化，获取表单中所有具有name属性的参数值
                    dataType:'json',
                    success:function(res){
                        console.log(res)
                        if(res.status==1){
                            $('#login').html('欢迎您：' + res.data.name)
                        }else{
                            $('#loginInfo').html(res.message)
                        }
                    }
                })
                
            })
        })
    </script>
</head>
<body>
    <div id="login">
        <form id="loginForm">
            <label for="username">用户名</label> <input type="text" id="username" name="username">
            <label for="password">密码</label> <input type="password" id="password" name="password">
            <input type="button" value="登陆" id="btnLogin">
            <span id="loginInfo"></span>
        </form>
    </div>
    <div id="content">

    </div>
</body>
</html>